﻿<!DOCTYPE html>
<html>
	<head>
		<title>Freewall demo sort</title>
		<meta content="text/html; charset=utf-8" http-equiv="content-type">
		<meta name="description" content="Freewall demo filter" />
		<meta name="keywords" content="javascript, dynamic, grid, layout, jquery plugin, fit zone"/>
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
		<script type="text/javascript" src="../freewall.js"></script>

		<style type="text/css">
			html, body {
				margin: 0;
				padding: 0;
			}

			.layout {
				padding: 15px;
			}

			.free-wall {
			}


		</style>
	</head>
	<body>
		<div class='header'>
			<div class="clearfix">
				<div class="float-left">
						<h1><a href="http://vnjs.net/www/project/freewall/">Free Wall</a></h1>
						<div class='target'>Creating dynamic grid layouts.</div>
				</div>
			</div>
		</div>
		<div class="layout">
			<div id="freewall" class="free-wall"></div>
		</div>

		<script type="text/javascript">
			var temp = "<div class='brick {size}' style='background-color: {color}'><div class='cover'>{size}</div></div>";
			var sizes = ["size11", "size12", "size21", "size22", "size13", "size31", "size23"];
			var colour = [
				"rgb(142, 68, 173)",
				"rgb(211, 84, 0)",
				"rgb(0, 106, 63)",
				"rgb(135, 0, 0)",
				"rgb(39, 174, 96)",
				"rgb(192, 57, 43)",
				"rgb(41, 128, 185)",
				"rgb(243, 156, 18)"
			];
			var html = '', size = '', color = '', limitItem = 100;
			for (var i = 0; i < limitItem; ++i) {
				size = sizes[sizes.length * Math.random() << 0];
				color = colour[colour.length * Math.random() << 0];
				html += temp.replace(/\{size\}/g, size).replace("{color}", color);
			}
			$("#freewall").html(html);

			$(function() {
				var wall = new Freewall("#freewall");
				wall.reset({
					selector: '.brick',
					animate: true,
					cellW: 160,
					cellH: 160,
					fixSize: 0,
					onResize: function() {
						wall.refresh();
					}
				});
				wall.fitWidth();

				// auto sorting;
				setTimeout(function() {
					wall.sortBy(function(a, z) {
						return $(a).width() - $(z).width();
					});
				}, 2000);
			});
		</script>
	</body>
</html>
